<template>
  <div class="index-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="首页" name="1"></el-tab-pane>
      <el-tab-pane label="表白墙" name="2"></el-tab-pane>
   </el-tabs>

    <el-form :inline="false" :model="queryForm" ref="ruleFormRef">
        <el-form-item label="校区" prop="schoolId" :rules="[{ required: true, message: '请输入校区', trigger: 'blur' }]">
          <el-select v-model="queryForm.schoolId" @change="selectChange" clearable placeholder="请选择">
            <el-option
              v-for="item in schoolData"
              :disabled="item.status != 2"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="imgUrl" :rules="[{ required: true, message: '请输入商品图片', trigger: 'blur' }]">
         <VabQiniuUpload ref="fileUpload" :limit="10" @onOk="urlOK" @nextOk="delOk"></VabQiniuUpload>
        </el-form-item>
        </el-form>

  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
  import VabQiniuUpload from '@/components/VabQiniuUpload/multiple_index'
import {getAllBannerList,addBanner,delBanner} from '@/api/banner/banner_api.js'
export default {
  name: 'andit',
    components: {
      VabQiniuUpload
    },
  setup(props, { emit }) {
    const Interface = reactive({
      async getBannerList(){
        let params = {}
        if(!query.queryForm.schoolId){
          query.queryForm.schoolId = query.schoolData.length > 0 ? query.schoolData[0].schoolId:''
        }
        params.type = parseInt(query.activeName)
        params.schoolId = query.queryForm.schoolId
        const {data} = await getAllBannerList(params)
        if(data){
          fileUpload.value.loadImg(data.banners)
        }
      },
      handleClick(tab){
        if(tab.name == '1'){
          Interface.getToken(9)
          Interface.getBannerList()
        }else if(tab.name == '2'){
          Interface.getToken(5)
          Interface.getBannerList()
        }
      },
      getToken(number){
        let params = {type:number}
        store.dispatch('baseStore/setQiniuToken',params)
      },
      async delOk(url){
         let params = {}
         params.schoolId = query.queryForm.schoolId
          params.type = parseInt(query.activeName)
          params.bannerUrl = url
          await delBanner(params)
      },
       async urlOK(url){
        if(!query.queryForm.schoolId){
          return Message.error('请选择校区')
        }
        let params = {}
         params.schoolId = query.queryForm.schoolId
          params.type = parseInt(query.activeName)
          params.imgUrl = url
          await addBanner(params)
      },
      selectChange(val){
        query.queryForm.schoolId = val
        Interface.getBannerList()
      }
    })
    const fileUpload = ref(null)
    const query = reactive({
      queryForm:{
        schoolId:'',
        imgUrl:''
      },
      activeName:'1',
      schoolData:computed(() => store.getters['baseStore/schoolData']),
      userinfo:computed(() => store.getters['baseStore/userInfo']),
      qiniuToken:computed(()=>{return store.getters['baseStore/qiniuToken']})
    })
    onMounted(()=>{
      Interface.getToken(9)
      Interface.getBannerList()
    })
    return {
      fileUpload,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>
<style>
    .others{
    text-align: center;
    margin-top: 20px;
  }
</style>